* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
}

li {
  list-style: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-25 {
  padding: 0 25px;
}

.db {
  display: block;
}

.pointer {
  cursor: pointer;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-5 {
  margin-right: 5px;
}

i, em {
  font-style: normal;
}

.user-info {
  background-color: #fff !important;
  color: #666 !important;
  border: none;
  padding: 5px 0 !important;
  border-radius: 0;
  box-shadow: 0 0 2px #999;
}

.user-info .avatar {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  margin-right: 10px;
}

.user-info > div p {
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  clear: both;
  cursor: pointer;
}

.user-info > div p:hover {
  background-color: rgba(102, 102, 102, 0.4);
}

.user-info > div p:last-of-type {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.user-info > div p a {
  color: #fff;
  font-size: 15px;
}

.user-info .popper__arrow {
  border-bottom-color: rgba(153, 153, 153, 0.5) !important;
}

.user-info .popper__arrow::after {
  border-bottom-color: #fff !important;
}

.user-fee {
  background-color: #fff !important;
  color: #666 !important;
  border: none;
  padding: 5px 0 !important;
  border-radius: 0;
  box-shadow: 0 0 2px #999;
}

.user-fee li {
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.user-fee li:hover {
  background-color: rgba(102, 102, 102, 0.4);
}

.user-fee .popper__arrow {
  border-bottom-color: rgba(153, 153, 153, 0.5) !important;
}

.user-fee .popper__arrow::after {
  border-bottom-color: #fff !important;
}

.user-message {
  background-color: #fff !important;
  color: #666 !important;
  border: none;
  padding: 5px 0 !important;
  border-radius: 0;
  box-shadow: 0 0 2px #999;
}

.user-message h5 {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #666;
  padding: 0 25px;
}

.user-message li {
  padding: 10px 25px;
}

.user-message li:hover {
  background-color: rgba(102, 102, 102, 0.4);
}

.user-message li p {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-message li p a {
  font-size: 12px;
  color: #409EFF;
}

.user-message li p span {
  font-size: 12px;
  color: #999;
}

.user-message .un-message {
  height: 170px;
  text-align: center;
  padding-top: 46px;
}

.user-message .un-message img {
  width: 64px;
  margin: 0 auto;
}

.user-message .un-message span {
  display: block;
  margin-top: 25px;
  color: #999;
}

.user-message .more {
  text-align: center;
  height: 40px;
  line-height: 20px;
  cursor: pointer;
  border: none;
  border-top: 1px solid #666;
}

.user-message .popper__arrow {
  border-bottom-color: rgba(153, 153, 153, 0.5) !important;
}

.user-message .popper__arrow::after {
  border-bottom-color: #fff !important;
}
